import React, { useState } from 'react'

export default function App() {
  console.log('app更新了')
  // 注意: useState中已经帮我们考虑的性能优化问题,如果state的数据没有变化,则组件不会再更新了
  // const [变量名, 修改状态的函数] = useState(初始值) //作用:定义状态
  const [count, setCount] = useState(0) // 每一次app组件更新,count和setCount这两个常量都会被重新创建,但是useState里面的数据是缓存好的.数据是正确的
  const [msg, setMsg] = useState('hello')

  return (
    <div>
      App
      <hr />
      <p>{count}</p>
      <p>{msg}</p>
      <button
        onClick={() => {
          setCount(count + 1)
        }}
      >
        +
      </button>
      <button
        onClick={() => {
          setMsg('hook')
        }}
      >
        修改msg
      </button>
    </div>
  )
}
